<!-- 电脑客户端下载页面 -->
<template>
  <div class="mail-desktop-page">
    <!-- 顶部导航 -->
    <header class="top-nav">
      <div class="nav-container">
        <div class="nav-left">
          <img
            src="@/assets/images/logo.png"
            alt="贵港文旅+"
            class="nav-logo"
          />
          <div class="brand-wrapper">
            <span class="brand-name">贵港文旅+</span>
            <span class="brand-pinyin">GUIGANGWENLV+</span>
          </div>
          <span class="divider">|</span>
          <span class="nav-title">你的专业文旅助手</span>
        </div>
        <div class="nav-right">
          <router-link to="/" class="nav-link">贵港文旅首页</router-link>
          <router-link to="/download/app" class="nav-link"
            >手机App下载</router-link
          >
          <router-link to="/download/desktop" class="nav-link"
            >电脑客户端下载</router-link
          >
          <router-link to="/merchant/apply" class="nav-link"
            >商家入驻</router-link
          >
          <router-link to="/help/guide" class="nav-link">帮助</router-link>
          <router-link to="/feedback" class="nav-link">反馈</router-link>
          <router-link to="/login" class="nav-link login-link"
            >去登录</router-link
          >
        </div>
      </div>
    </header>

    <!-- 主要内容区 -->
    <div class="main-container">
      <div class="content-wrapper">
        <!-- 左侧内容 -->
        <div class="left-content">
          <div class="brand">
            <img
              src="@/assets/images/logo.png"
              alt="贵港文旅+"
              class="brand-logo"
            />
            <div class="brand-info">
              <h1 class="brand-name">贵港文旅+</h1>
              <p class="brand-slogan">电脑客户端</p>
            </div>
          </div>

          <div class="version-info">
            <div class="info-item">
              <el-icon><Document /></el-icon>
              <span>版本：2.0.0</span>
            </div>
            <div class="info-item">
              <el-icon><Calendar /></el-icon>
              <span>更新：2024-03-20</span>
            </div>
            <div class="info-item">
              <el-icon><Download /></el-icon>
              <span>大小：68.5MB</span>
            </div>
          </div>

          <div class="download-section">
            <div class="download-options">
              <div
                class="download-card windows"
                @click="handleDownload('windows')"
              >
                <div class="card-icon">
                  <el-icon><Monitor /></el-icon>
                </div>
                <div class="card-info">
                  <h3>Windows 版本</h3>
                  <p>支持 Windows 10 及以上版本</p>
                </div>
                <el-button type="primary" class="download-btn">
                  <el-icon><Download /></el-icon>
                  立即下载
                </el-button>
              </div>

              <div class="download-card mac" @click="handleDownload('mac')">
                <div class="card-icon">
                  <el-icon><Apple /></el-icon>
                </div>
                <div class="card-info">
                  <h3>macOS 版本</h3>
                  <p>支持 macOS 10.15 及以上版本</p>
                </div>
                <el-button type="primary" class="download-btn">
                  <el-icon><Download /></el-icon>
                  立即下载
                </el-button>
              </div>
            </div>
          </div>

          <div class="feature-section">
            <h2 class="section-title">功能特点</h2>
            <div class="feature-grid">
              <div
                v-for="feature in features"
                :key="feature.id"
                class="feature-card"
              >
                <div class="feature-icon">
                  <el-icon><component :is="feature.icon" /></el-icon>
                </div>
                <div class="feature-content">
                  <h3>{{ feature.title }}</h3>
                  <p>{{ feature.description }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧预览 -->
        <div class="right-content">
          <div class="preview-container">
            <div class="preview-window">
              <div class="window-header">
                <div class="window-controls">
                  <span class="control close"></span>
                  <span class="control minimize"></span>
                  <span class="control maximize"></span>
                </div>
                <div class="window-title">贵港文旅+</div>
              </div>
              <div class="window-content">
                <img
                  src="@/assets/images/preview/desktop-preview.png"
                  alt="客户端预览"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="page-footer">
      <div class="footer-info">
        <span>贵港文旅版权所有 ©2024</span>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import {
  Monitor,
  Apple,
  Download,
  Document,
  Calendar,
  Location,
  ChatLineRound,
  Connection,
  Picture,
  VideoPlay,
  Setting,
} from "@element-plus/icons-vue";

const features = [
  {
    id: 1,
    icon: "Picture",
    title: "高清预览",
    description: "大屏展示景区全景，高清图片浏览",
  },
  {
    id: 2,
    icon: "VideoPlay",
    title: "视频直播",
    description: "实时景区直播，身临其境体验",
  },
  {
    id: 3,
    icon: "Connection",
    title: "多端同步",
    description: "与手机端数据实时同步，无缝切换",
  },
  {
    id: 4,
    icon: "Setting",
    title: "个性设置",
    description: "丰富的个性化设置选项",
  },
];

const handleDownload = (platform) => {
  ElMessage({
    message: "客户端正在开发中，敬请期待！",
    type: "info",
  });
};
</script>

<style lang="scss" scoped>
.mail-desktop-page {
  @apply min-h-screen flex flex-col relative;
  background: url("@/assets/images/register-bg.jpg") center/cover fixed
    no-repeat;
  height: 100vh;
  overflow: hidden;

  &::before {
    content: "";
    @apply fixed inset-0 z-0;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0) 64px,
      rgba(255, 255, 255, 0) calc(100% - 64px),
      rgba(255, 255, 255, 0.9) 100%
    );
    pointer-events: none;
  }

  .top-nav {
    @apply w-full fixed top-0 left-0 z-50;

    .nav-container {
      @apply max-w-7xl mx-auto h-16 flex items-center justify-between;
      padding-left: 16px;
      padding-right: 8px;

      .nav-left {
        @apply flex items-center;

        .nav-logo {
          @apply h-14 mr-2;
        }

        .brand-wrapper {
          @apply flex flex-col justify-center;

          .brand-name {
            @apply text-2xl font-bold text-gray-800 leading-6;
          }

          .brand-pinyin {
            @apply text-[8px] text-gray-500 mt-0.5;
          }
        }

        .divider {
          @apply mx-3 text-gray-300 text-xl;
        }

        .nav-title {
          @apply text-gray-700 text-lg font-medium;
        }
      }

      .nav-right {
        @apply flex items-center;
        gap: 24px;

        .nav-link {
          @apply text-sm text-gray-600 hover:text-[#2e74e5] transition-colors;
        }
      }
    }
  }

  .main-container {
    @apply flex-1 mt-16 mb-16 mx-auto w-full max-w-7xl;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    overflow-y: auto;
    padding: 3rem;

    .content-wrapper {
      @apply flex items-start justify-between gap-16 max-w-6xl mx-auto;

      .left-content {
        @apply flex-1 max-w-2xl;

        .brand {
          @apply flex items-center gap-6 mb-12;

          .brand-logo {
            @apply h-14 mr-2;
          }

          .brand-info {
            .brand-name {
              @apply text-4xl font-bold text-gray-900 mb-2;
              background: linear-gradient(to right, #2563eb, #3b82f6);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }

            .brand-slogan {
              @apply text-lg text-gray-600;
            }
          }
        }

        .version-info {
          @apply flex gap-10 mb-12;

          .info-item {
            @apply flex items-center gap-3 text-gray-600 text-lg;

            .el-icon {
              @apply text-2xl text-gray-400;
            }
          }
        }

        .download-section {
          @apply mb-16;

          .download-options {
            @apply grid grid-cols-2 gap-8;

            .download-card {
              @apply bg-white rounded-2xl p-8 shadow-lg hover:shadow-xl
                     transition-all duration-300 cursor-pointer transform hover:-translate-y-1;

              .card-icon {
                @apply w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-6;

                .el-icon {
                  @apply text-3xl text-gray-600;
                }
              }

              .card-info {
                h3 {
                  @apply text-2xl font-semibold text-gray-900 mb-2;
                }

                p {
                  @apply text-base text-gray-500 mb-6;
                }
              }

              .download-btn {
                @apply w-full h-12 text-lg flex items-center justify-center gap-2;
              }
            }
          }
        }

        .feature-section {
          .section-title {
            @apply text-2xl font-bold text-gray-900 mb-8;
          }

          .feature-grid {
            @apply grid grid-cols-2 gap-8;

            .feature-card {
              @apply flex items-start gap-5 p-8 bg-white rounded-2xl shadow-lg
                     hover:shadow-xl transition-all duration-300;

              .feature-icon {
                @apply w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center;

                .el-icon {
                  @apply text-3xl text-blue-500;
                }
              }

              .feature-content {
                h3 {
                  @apply text-xl font-semibold text-gray-900 mb-3;
                }

                p {
                  @apply text-base text-gray-600 leading-relaxed;
                }
              }
            }
          }
        }
      }

      .right-content {
        @apply w-[600px] flex-shrink-0 sticky top-8;

        .preview-container {
          @apply relative;

          &::before {
            content: "";
            @apply absolute -inset-8 bg-gradient-to-r from-blue-500/10 to-indigo-500/10
                   rounded-[40px] blur-2xl;
          }

          .preview-window {
            @apply bg-white rounded-2xl shadow-2xl overflow-hidden;
            transform: perspective(1000px) rotateY(-5deg);
            transition: transform 0.3s ease;

            &:hover {
              transform: perspective(1000px) rotateY(0deg);
            }

            .window-header {
              @apply bg-gray-100 px-6 py-3 flex items-center gap-4;

              .window-controls {
                @apply flex gap-2;

                .control {
                  @apply w-3 h-3 rounded-full;

                  &.close {
                    @apply bg-red-500;
                  }

                  &.minimize {
                    @apply bg-yellow-500;
                  }

                  &.maximize {
                    @apply bg-green-500;
                  }
                }
              }

              .window-title {
                @apply text-sm text-gray-600 font-medium;
              }
            }

            .window-content {
              @apply p-0 bg-gray-50;

              img {
                @apply w-full rounded-none;
              }
            }
          }
        }
      }
    }
  }

  .page-footer {
    @apply w-full py-6 text-center fixed bottom-0 left-0 z-50;
    background: transparent;

    .footer-info {
      @apply text-sm text-gray-500;
    }
  }
}

@media (max-width: 1536px) {
  .mail-desktop-page {
    .main-container {
      @apply px-8;

      .content-wrapper {
        @apply gap-12;

        .right-content {
          @apply w-[500px];
        }
      }
    }
  }
}

@media (max-width: 1280px) {
  .mail-desktop-page {
    .main-container {
      .content-wrapper {
        @apply flex-col items-center;

        .left-content {
          @apply max-w-3xl w-full;

          .download-section {
            .download-options {
              @apply gap-6;
            }
          }
        }

        .right-content {
          @apply w-[600px] static mt-16;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .mail-desktop-page {
    .main-container {
      @apply px-4 py-6;

      .content-wrapper {
        .left-content {
          .brand {
            @apply mb-8;

            .brand-logo {
              @apply w-16 h-16;
            }

            .brand-info {
              .brand-name {
                @apply text-3xl;
              }
            }
          }

          .version-info {
            @apply flex-wrap gap-4 mb-8;

            .info-item {
              @apply text-base;
            }
          }

          .download-section {
            @apply mb-10;

            .download-options {
              @apply grid-cols-1 gap-4;

              .download-card {
                @apply p-6;

                .card-icon {
                  @apply w-12 h-12 mb-4;

                  .el-icon {
                    @apply text-2xl;
                  }
                }

                .card-info {
                  h3 {
                    @apply text-xl mb-1;
                  }

                  p {
                    @apply text-sm mb-4;
                  }
                }
              }
            }
          }

          .feature-section {
            .section-title {
              @apply text-xl mb-6;
            }

            .feature-grid {
              @apply grid-cols-1 gap-4;

              .feature-card {
                @apply p-6;

                .feature-icon {
                  @apply w-12 h-12;

                  .el-icon {
                    @apply text-2xl;
                  }
                }
              }
            }
          }
        }

        .right-content {
          @apply w-full max-w-lg;

          .preview-window {
            .window-header {
              @apply px-4 py-2;
            }

            .window-content {
              @apply p-4;
            }
          }
        }
      }
    }
  }
}
</style>
